<template>

  <section class="bg">
    <div style="height: 500px">
      <mavon-editor v-model="values"/>
    </div>
    <el-row>
      <el-col :span="24">
        <div class="logo"></div>
      </el-col>
      <!--<el-col :span="24"><div class="reminder">为了个更好的体验联盟速运，请使用Chrome，Firefox或IE9以上浏览器</div></el-col>-->
      <el-col :span="24">

        <el-row>
          <el-col :span="12">
            <el-row>
              <el-col :span="24">
                <div class="sy_bg"><img src="../../assets/icon.png" width="100%"></div>
              </el-col>
            </el-row>
          </el-col>
          <!--缓存地址-到四级-->
          <address-select v-model="addressSelect"
                          @change="" placeholder="请选择地址"
                          class="f-w233" style="width: 100%;display: none"></address-select>


          <el-col :span="12">
            <el-row>
              <el-col :span="24">
                <div class="tem_login">
                  <!--<div class="opcty_bg"></div>-->
                  <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px"
                           class="demo-ruleForm login-container">
                    <h3 class="title">用户登录</h3>
                    <el-form-item prop="account">

                      <!--<span class="bg_user"></span>-->
                      <input type="text" v-model="ruleForm2.account" auto-complete="off"
                             icon="el-icon-../../assets/1.png"
                             placeholder="请输入登陆用户名" class="el-input__inner"/>
                    </el-form-item>
                    <el-form-item prop="checkPass">
                      <input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="请输入您的登陆密码"
                             class="el-input__inner" v-on:keyup.enter="handleSubmit2"></input>
                    </el-form-item>
                    <el-form-item class="val_icon" v-if="verificationCode">
                      <div class="checkcode">
                        <el-input type="text" v-model="inp_code" v-on:keyup.enter="handleSubmit2" placeholder="验证码"
                                  maxlength="4" class="login_txtbx"></el-input>
                        <canvas class="J_codeimg" style="background:#4f950b; margin-left: 8px; height: 30px"
                                id="can_code"></canvas>
                      </div>
                      <el-button type="success" class="ver_btn" id="inp_change_code_btn" @click="createCode">获取验证码
                      </el-button>

                    </el-form-item>
                    <el-form-item style="margin-top: -10px">
                      <el-button type="primary" style="width:100%; background: #1487d1;font-size: 14px"
                                 @click="handleSubmit2" :loading="logining">登录
                      </el-button>
                    </el-form-item>
                    <el-form-item label="" style="margin-top: -10px">
                      <el-checkbox class="radio" :label="1" v-model="checked" style="color: #555555;">
                        我同意并已阅读《联盟速运服务协议》
                      </el-checkbox>
                    </el-form-item>

                  </el-form>

                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <div class="login_txtbx">为了更好的体验联盟速运，请使用Chrome，Firefox或IE9以上浏览器</div>
  </section>
</template>

<script>
  import {login} from '../../api/login';

  let code = null;
  export default {
    data () {
      return {
        values: null,
        addressSelect: [],
        currentCode: '', // 当前的验证码
        inp_code: '', // 当前的验证码
        currentCountNum: 0, // 统计当前的次数
        verificationCode: false,
        logining: false,
        ruleForm2: {
          account: '',
          checkPass: ''
        },
        rules2: {
          account: [
            {required: true, message: '请输入账号', trigger: 'blur'}
          ],
          checkPass: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ]
        },
        checked: true
      };
    },
    methods: {

      handleSubmit2 (ev) {
        if (this.verificationCode === true) {
          if (document.getElementsByClassName('el-input__inner')[2].value === '') {
            this.$message.error('验证码不能为空');
            return;
          } else if (this.inp_code !== this.currentCode) {
            this.$message.error('验证码错误');
            return;
          }
        }
        login(this.ruleForm2.account, this.ruleForm2.checkPass)
          .then((res) => {
            debugger;
            if (res.data.success) {
              console.log(res);
              let user = res.data;
              this.$store.commit('user', user);
              sessionStorage.setItem('user', JSON.stringify(user));
              this.$router.push({path: '/'});
            } else {
              this.$message.error('账号密码错误');
            }
          });
      },
      createCode: function () {
        code = '';
        let codeLength = 4;
        let baseStr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
        for (let i = 0; i < codeLength; i++) {
          let charIndex = Math.floor(Math.random() * 60);
          code += baseStr[charIndex];
        }

        if (code.length !== codeLength) {
          this.createCode();
        }
        this.currentCode = code;
        this.showCode(code);
      },
      showCode: function (code) {
        let c = document.getElementById('can_code');
        let ctx = c.getContext('2d');
        ctx.clearRect(0, 0, 1000, 1000);
        ctx.font = "80px 'Microsoft Yahei'";
        ctx.fillText(code, 0, 100);
        ctx.fillStyle = 'white';
      }
    },
    mounted () {
    }
  };
</script>

<style lang="less" scoped>

  .tem_login {
    height: 100%;
    position: absolute;
    margin-top: 20%;
    right: 20%;
    .el-form {
      background-color: white;
    }
  }

  .logo {
    width: 100%;
    margin-left: 30px;
    background: url("../../assets/logo.png") no-repeat;
    height: 80px
  }

  .bg {
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-image: url("../../assets/bg.jpg");
    overflow: hidden;
  }

  .login-container {
    height: 290px;
    position: relative;

    width: 300px;
    padding: 35px 35px 15px 35px;
    /*background: #fff;*/
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    .title {
      margin: 0px auto 30px auto;
      text-align: left;
      color: #505458;
    }
    .remember {
      margin: 0px 0px 35px 0px;
    }
  }

  .opcty_bg {
    position: relative;
    top: 20%;
    width: 372px;
    height: 343px;
    background: #fff;
    opacity: .5
  }

  .sy_bg {
    margin-left: 150px;
    margin-top: 10%;
    width: 70%;
    width: 70%
  }

  /*.opcty_bg{ position: absolute;  top: 300px;  right: 25%;  width: 372px;height:343px; background: #fff; opacity:.5}*/
  .bg_user {
    background: url("../../assets/1.png") no-repeat;
    display: block;
    width: 20px;
    height: 20px;
    position: relative;
    left: 5px;
    top: 10px;
    z-index: 999;
  }

  .checkcode {
    float: left;
    width: 120px;
    height: 42px;

    color: #000;
    margin-top: -10px;
  }

  .checkcode input {
    width: 120px;
    /*height: 36px;*/
    line-height: 36px;
    padding: 3px;

    outline: none;
    border: none;
    text-indent: 2.8em;
    float: left;
  }

  .checkcode canvas {
    width: 85px;
    height: 36px;
    padding: 3px;
    z-index: 999;
    background: #fff;
    position: relative;
    top: -50px;
    right: -120px;
  }

  .ver_btn {
    width: 80px;
    text-indent: -0.7em;
    height: 35px;

    margin: 0;
    z-index: 1;

    position: absolute;
    right: 0;

  }

  .login_txtbx {
    width: 100%;
    position: absolute;
    bottom: 50px;
    text-align: center;
    color: white;
  }

  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>
